<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>pjax</title>
	<script type="text/javascript" src="../static/libs/jquery.min.js"></script>
	<script type="text/javascript" src="../static/libs/jquery.pjax.min.js"></script>
	
</head>
<body>

	<div style="width:100%;height: 80px; background: yellow;border:1px solid red;">
		<h1>top</h1>
	</div>
	<div style="width:200px;height: 300px; background: #eee;border:1px solid red;float:left;">
		<ul>
			<li><a data-pjax href="#">Home</a></li>
			<li><a data-pjax href="/hake/user/main">Base</a></li>
			<li><a data-pjax href="work.html">work</a></li>
		</ul>
	</div>
	<div id="container" style="width:800px;height: 300px; background:#ccc;border:1px solid red;float:left;">
		
	</div>

	<script type="text/javascript">
		$(function() {
			$(document).pjax("a[data-pjax]", "#container", {
				maxCacheLength:0,
				push:false, 
				replace:true,
				fragment: '#container', 
				timeout: 8000});
			
			/* if ($.support.pjax) {
				$(document).on('click', 'a', function(event) {
					console.info(event) ;
					var container = $(this).closest('[data-pjax-container]')
			    	$.pjax.click(event, {container: container})
			  	})
			} */
			
			$(document).on('pjax:send', function() { //pjax链接点击后显示加载动画；
			    alert();
			});
		});
	</script>
</body>
</html>